/**
 * 导航栏的下拉
 * 
 * 
 */

$(function () {
  // 我的聚美下拉
  $(".my-jm-box").mouseover(function () {
    $(".my-jm-sel-menu").stop().slideDown(200)
  }).mouseout(function () {
    $(".my-jm-sel-menu").stop().slideUp(200)
  })

  // 更多下拉
  $(".mores").mouseover(function () {
    $(".my-jm-sel-menu1").stop().slideDown(200)
  }).mouseout(function () {
    $(".my-jm-sel-menu1").stop().slideUp(200)
  })

  // 侧边栏 用户部分
  $(".username").mouseover(function () {
    $(".hellow").stop().fadeIn(500)
  }).mouseout(function () {
    $(".hellow").stop().fadeOut(500)
  })
  // 导航栏 美妆商城
  $(".nav-makeup").mouseover(function () {
    $(".nav-makeup-menu").stop().slideDown(200)
  }).mouseout(function () {
    $(".nav-makeup-menu").stop().slideUp(200)
  })
  //去购物车结算
  $(".shop").mouseover(function () {
    $(".box").stop().slideDown(200)
  }).mouseout(function () {
    $(".box").stop().slideUp(200)
  })



  // top部分
  $(document).scroll(function () {
    console.log($(document).scrollTop());
    if ($(document).scrollTop() > 400) {
      $(".top").css("display", "block")
    }
    if ($(document).scrollTop() < 400) {
      $(".top").css("display", "none")
    }
  })
  // 点击top按钮 让他返回顶部
  $(".top").click(function () {
    $(document).scrollTop = 0 + 'px'
  })
})
//  侧边栏点击效果
var aa = document.querySelectorAll('#p li')
for (var i = 0; i < aa.length; i++) {
  aa[i].onclick = function () {
    for (var j = 0; j < aa.length; j++) {
      aa[j].className = ('g')
    }
    this.classList.add('c')
  }
}
/**
 * 
 * 轮播图的代码
 * 
 */

/**
 * 动画函数
 * 
 */
function animate(element, target) {
  var current = element.offsetLeft;
  clearInterval(element.timer);
  element.timer = setInterval(function () {
    var step = (target - current) / 10;
    // step = current < target ? step : -step
    current += step;
    if (Math.abs(target - current) > Math.abs(step)) {
      element.style.left = current + "px";
    } else {
      clearInterval(element.timer);
      element.style.left = target + "px";
    }
  }, 20)

}

//  获取元素
window.onload = function () {
  var oRotationchart = document.querySelector(".Rotation-chart");
  //获取banner
  var obanner = document.querySelector(".banner");
  //获取banner的宽度
  var obannerWidth = obanner.offsetWidth;
  //获取ul
  var oUl = document.querySelector(".banner ul");
  //获取所有的li
  var ali = oUl.children;
  //声明一个计数器
  var num = 0;
  var oa = document.querySelectorAll(".Rotation-chart .control a")

  /**--------------自动播放和小圆点导航 */
  var timerId = setInterval(function () {
    if (num == ali.length - 1) {
      num = 0;
      oUl.style.left = 0 + 'px';
    }
    num++;
    animate(oUl, -num * obannerWidth);
    if (num > oa.length - 1) {
      oa[oa.length - 1].className = "";
      oa[0].className = "active";
    } else {
      for (var j = 0; j < oa.length; j++) {
        oa[j].removeAttribute("class");
      }
      console.log(num)
      oa[num].className = "active";
    }
  }, 5000)

  for (var i = 0; i < oa.length; i++) {
    oa[i].setAttribute("data-index", i);
    oa[i].onmouseover = function () {
      for (var j = 0; j < oa.length; j++) {
        oa[j].removeAttribute("class");
      }
      this.className = "active";
      var index = this.getAttribute("data-index");
      console.log(index)
      animate(oUl, -index * 1518)
    }
  }
  /**------------鼠标移入移出----------- */
  oRotationchart.onmouseover = function () {
    clearInterval(timerId)
  }
  oRotationchart.onmouseout = function () {
    timerId = setInterval(function () {
      if (num == ali.length - 1) {
        num = 0;
        oUl.style.left = 0 + 'px';
      }
      num++;
      animate(oUl, -num * obannerWidth);
      if (num > oa.length - 1) {
        oa[oa.length - 1].className = "";
        oa[0].className = "active";
      } else {
        for (var j = 0; j < oa.length; j++) {
          oa[j].removeAttribute("class");
        }
        console.log(num)
        oa[num].className = "active";
      }
    }, 3000)
  }
}

// 必看左边
function ShowCountDown(year, month, day, divname) {
  var now = new Date();
  var endDate = new Date(year, month - 1, day);
  var leftTime = endDate.getTime() - now.getTime();
  var dd = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
  var hh = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时数
  var mm = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟数
  var ss = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
  dd = checkTime(dd);
  hh = checkTime(hh);
  mm = checkTime(mm);
  ss = checkTime(ss); //小于10的话加0
  var cc = document.getElementsByClassName(divname);
  for (var i = 0; i < cc.length; i++) {
    cc[i].innerHTML = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
  }

}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
window.setInterval(function () {
  ShowCountDown(2019, 01, 19, 'countdown');
}, 0);